<template>
	<view class="uni-popup-calculator">
		<view class="uni-popup-calculator-title">
			<view>{{str}}</view>
			<view>{{number}}</view>
		</view>
		<view class="uni-popup-content">
			<view class="uni-popup-cell"
				:class="[item.flag?'active':'',item.width == 2?'cur':'',item.border?'border':'']"
				@click.stop="calculationTwo(item)" v-for="(item,idx) in calculator" :key="idx">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: '0', //计算器显示区域值
				str: "0",
				calculator: [{
						name: 'c',
						flag: false,
						type: 'clear',
						width: 2,
						border: true
					},
					{
						name: '%',
						flag: false,
						type: 'operator',
						width: 1,
						border: false
					},
					{
						name: '/',
						flag: false,
						type: 'operator',
						width: 1,
						border: false
					},
					{
						name: '7',
						flag: false,
						type: 'number',
						width: 1,
						border: true
					},
					{
						name: '8',
						flag: false,
						type: 'number',
						width: 1,
						border: false
					},
					{
						name: '9',
						flag: false,
						type: 'number',
						width: 1,
						border: false
					},
					{
						name: '*',
						flag: false,
						type: 'operator',
						width: 1,
						border: false
					},
					{
						name: '4',
						flag: false,
						type: 'number',
						width: 1,
						border: true
					},
					{
						name: '5',
						flag: false,
						type: 'number',
						width: 1,
						border: false
					},
					{
						name: '6',
						flag: false,
						type: 'number',
						width: 1,
						border: false
					},
					{
						name: '+',
						flag: false,
						type: 'operator',
						width: 1,
						border: false
					},
					{
						name: '1',
						flag: false,
						type: 'number',
						width: 1,
						border: true
					},
					{
						name: '2',
						flag: false,
						type: 'number',
						width: 1,
						border: false
					},
					{
						name: '3',
						flag: false,
						type: 'number',
						width: 1,
						border: false
					},
					{
						name: '-',
						flag: false,
						type: 'operator',
						width: 1,
						border: false
					},
					{
						name: '0',
						flag: false,
						type: 'number',
						width: 2,
						border: true
					},
					{
						name: '.',
						flag: false,
						type: 'string',
						width: 1,
						border: false
					},
					{
						name: '=',
						flag: false,
						type: 'equal',
						width: 1,
						border: false
					},
				],
				numberOne: '', //变量一
				numberTwo: '', //变量二
				symbol: '', //运算符
				complete: false, //判断是否完成一次计算
				current: -1,
			}
		},
		created() {},
		methods: {
			//计算器方法二:
			calculationTwo: function(item) {
				let that = this;
				//按键点击效果
				item.flag = true;
				setTimeout(() => {
					item.flag = false;
				}, 200);
				//判断输入的第一位是否是小数点
				switch (item.type) {
					case 'string':
						//小数点
						if (that.complete) {
							that.number = '0';
							that.complete = false;
						}
						if (that.symbol) {
							if ((that.number).indexOf('.') == -1) {
								that.numberTwo = that.numberTwo + '.';
								that.number = that.numberTwo;
							}
						} else {
							if ((that.number).indexOf('.') == -1) {
								that.number = that.number + '.';
							}
						}
						break;
					case 'number':
						//数字
						if (that.complete) {
							that.number = '0';
							that.complete = false;
						}
						if (that.symbol) {
							that.numberTwo += item.name;
							that.number = that.numberTwo;
						} else {
							if (that.number == '0') {
								that.number = item.name;
							} else {
								that.number += item.name;
							}
						}
						break;
					case 'operator':
						//运算符
						that.symbol = item.name;
						if (item.name != '%') {
							that.numberOne = that.number;
							that.numberTwo = '';
						} else {
							that.number = parseFloat(that.number) / 100;
						}
						break;
					case 'equal': //等号
						if (that.symbol == '-') {
							that.number = that.subtraction(that.numberOne, that.numberTwo);
						} else if (that.symbol == '+') {
							that.number = that.addition(that.numberOne, that.numberTwo);
						} else if (that.symbol == '*') {
							that.number = that.multiplication(that.numberOne, that.numberTwo);
						} else if (that.symbol == '/') {
							that.number = that.division(that.numberOne, that.numberTwo);
						} else if (that.symbol == '%') {
							that.number = parseFloat(that.number) / 1;
						}
						this.str = this.numberOne + this.symbol + this.numberTwo + '='
						that.complete = true;
						that.numberOne = '';
						that.numberTwo = '';
						that.symbol = '';
						break;
					case 'clear': //清除符
						that.clear();
						break;
				}
				if (!this.numberOne && !this.complete) {
					this.str = this.number
				} else if (!this.complete) {
					this.str = this.numberOne + this.symbol + this.numberTwo
				}
			},
			/*** 清除* */
			clear: function() {
				let that = this;
				that.number = '0';
				that.str = '0';
				that.numberOne = '';
				that.numberTwo = '';
				that.symbol = '';
				that.compile = false;
			},
			/*** 除法* */
			division: function(arg1, arg2) {
				var t1 = 0,
					t2 = 0,
					r1, r2;
				try {
					t1 = arg1.toString().split(".")[1].length
				} catch (e) {}
				try {
					t2 = arg2.toString().split(".")[1].length
				} catch (e) {}
				Math.r1 = Number(arg1.toString().replace(".", ""))
				Math.r2 = Number(arg2.toString().replace(".", ""))
				return (Math.r1 / Math.r2) * Math.pow(10, t2 - t1);
			},
			/*** 乘法* */
			multiplication: function(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			/*** 加法* */
			addition: function(arg1, arg2) {
				var r1, r2, m;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (arg1 * m + arg2 * m) / m;
			},
			/*** 减法* */
			subtraction: function(arg1, arg2) {
				var r1, r2, m, n;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1,
					r2
				)); //last modify by deeka//动态控制精度长度
				n = (r1 >= r2) ? r1 : r2;
				return ((arg1 * m - arg2 * m) / m).toFixed(n);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 简化颜色 */
	$bg-color: #f4f4f4;
	$text-color: #333;
	$button-bg: #e0e0e0;
	$button-active-bg: #d0d0d0;

	.uni-popup-calculator {
		background: $bg-color;
		border: 1px solid #ccc;
		border-radius: 8px;
		overflow: hidden;

		&-title {
			padding: 12rpx;
			border-bottom: 1px solid #ccc;

			>view:first-child {
				color: $text-color;
				font-size: 16px;
				min-height: 24rpx;
			}

			>view:last-child {
				color: $text-color;
				font-size: 24px;
				text-align: right;
				font-family: Arial, sans-serif;
			}
		}
	}

	.uni-popup-content {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
		background: $button-bg;
		padding: 6rpx;

		.uni-popup-cell {
			aspect-ratio: 1;
			background: $button-bg;
			color: $text-color;
			font-size: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.2s ease;

			&::before {
				display: none;
			}

			// 特殊按键样式
			&[class*='clear'] {
				background: #ffcccc;
				color: #ff4d4d;
			}

			&[class*='operator'] {
				color: #007bff;
			}

			&[class*='equal'] {
				background: #e0f7ff;
				color: #009688;
			}

			// 交互状态
			&.active {
				background: $button-active-bg;
				transform: none;
			}

			&.cur {
				grid-column: span 2;
				aspect-ratio: 2/1;
			}

			// 移除数字键特效
			&[class*='number']:not(.active):hover {
				&::after {
					display: none;
				}
			}
		}
	}
</style>